<template>
  <PageWrapper>
    <a-card>
      <div style="margin-bottom: 20px">
        <!--        <a-row :gutter="[20,20]">-->
        <!--          <a-col :xs="24" :sm="6">-->

        <!--          </a-col>-->
        <!--          <a-col :xs="24" :sm="6">-->

        <!--          </a-col>-->
        <!--          <a-col :xs="24" :sm="6">-->

        <!--          </a-col>-->
        <!--          <a-col :xs="24" :sm="6">-->
        <!--            <a-space>-->
        <!--              <a-button :icon="h(SearchOutlined)" type="primary"> {{ t('sys.form.placeholder.inquire') }} </a-button>-->
        <!--              <a-button> {{ t('sys.login.forget')  }} </a-button>-->
        <!--            </a-space>-->
        <!--          </a-col>-->
        <!--        </a-row>-->
      </div>
      <div>
        开关:
        <a-switch
          @change="checkedChange"
          checkedValue="1"
          unCheckedValue="0"
          v-model:checked="checked"
        />
      </div>
      <a-table
        @change="handleTableChange"
        :pagination="pagination"
        :loading="loading"
        bordered
        :columns="verificationcolumns"
        :dataSource="dataSource"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.dataIndex === 'verifyCode'">
            <a-image width="80px" :src="record.verifyCode" />
          </template>
          <template v-if="column.dataIndex === 'verifyCodeType'">
            <a-tag v-if="record.status == 0" color="orange">{{
              t('sys.configuration.taskprocess4')
            }}</a-tag>
            <a-tag v-if="record.status == 1">{{ t('sys.configuration.taskprocess2') }}</a-tag>
            <a-tag v-if="record.status == 2" color="green">{{
              t('sys.configuration.taskprocess5')
            }}</a-tag>
            <a-tag v-if="record.status == 3" color="red">{{
              t('sys.configuration.taskprocess6')
            }}</a-tag>
          </template>
          <template v-if="column.dataIndex === 'action'">
            <a-button @click="detailsClick(record)" type="link">
              {{ t('sys.configuration.particulars') }}
            </a-button>
            <a-popconfirm
              :title="t('sys.configuration.IsDelete')"
              :ok-text="t('sys.configuration.comfig')"
              @confirm="Taskconfirm(record)"
              :cancel-text="t('sys.configuration.cancel')"
            >
              <a-button danger type="link"> {{ t('sys.configuration.delete') }} </a-button>
            </a-popconfirm>
          </template>
        </template>
      </a-table>
    </a-card>
    <a-modal
      centered
      @ok="ModalShow = false"
      bordered
      width="80%"
      :title="t('sys.configuration.deviceDetails')"
      v-model:open="ModalShow"
    >
      <a-descriptions bordered title="Custom Size">
        <a-descriptions-item label="mac">{{ detailsRecord.mac }}</a-descriptions-item>
        <a-descriptions-item label="node">{{ detailsRecord.node }}</a-descriptions-item>
        <a-descriptions-item :label="t('sys.log.verificat')"
          ><a-image width="80px" :src="detailsRecord.verificat"
        /></a-descriptions-item>
        <a-descriptions-item :label="t('sys.log.verificatKey')">{{
          detailsRecord.verificatKey
        }}</a-descriptions-item>
        <a-descriptions-item :label="t('sys.configuration.describe')">{{
          detailsRecord.remark
        }}</a-descriptions-item>
        <a-descriptions-item :label="t('sys.code.status')">
          <a-tag v-if="record.status == 0" color="orange">{{
            t('sys.configuration.taskprocess7')
          }}</a-tag>
          <a-tag v-if="record.status == 1" color="green">{{
            t('sys.configuration.taskprocess5')
          }}</a-tag>
        </a-descriptions-item>
        <a-descriptions-item :label="t('sys.device.columns.userId')">{{
          detailsRecord.userId
        }}</a-descriptions-item>
        <a-descriptions-item :label="t('sys.device.columns.remck')">{{
          detailsRecord.owner
        }}</a-descriptions-item>
        <a-descriptions-item :label="t('sys.device.columns.validTime')">
          {{ detailsRecord.validTime }}
        </a-descriptions-item>
      </a-descriptions>
    </a-modal>
  </PageWrapper>
</template>

<script lang="ts" setup>
  import { onMounted, ref } from 'vue';
  import { postverifyListPage, deleteverify } from "@/api/demo/device";
  import { PageWrapper } from '@/components/Page';
  import { verificationcolumns } from './account.data';
  import { useI18n } from '@/hooks/web/useI18n';
  import { message } from "ant-design-vue";

  const { t } = useI18n();
  const pagination = ref({
    total: 0,
    current: 1,
    pageSize: 10,
  });
  const formState =ref({})
  const codingShowModal = ref(true);
  const codingModal = () => {
    codingShowModal.value = true;
  };
  const checkedChange = (e) => {
    console.log(e);
    localStorage.setItem('CapChartShow', e);
  };
  const dataSource = ref([]);
  const ModalShow = ref(false);
  const detailsRecord = ref({});
  const detailsClick = (record) => {
    ModalShow.value = true;
    detailsRecord.value = record;
  };
  const Taskconfirm = (e) => {
    deleteverify(e.id).then((res) => {
      if (res.code == 200) {
        message.success(t('sys.configuration.deleteSucces'));
        init();
      }
    });
  };
  const handleTableChange = (e) => {
    pagination.value = e;
    init();
  };
  const checked = ref(0);
  const loading = ref(true);
  // const gatherTaskId = ref(null);
  const init = () => {
    loading.value = true;
    postverifyListPage({
      size: pagination.value.pageSize,
      current: pagination.value.current,
      ...formState.value,
    }).then(res =>{
      if(res.code == 200){
        dataSource.value = res.data.records
        loading.value = false;
      }
    })
    if (localStorage.getItem('CapChartShow')) {
      checked.value = localStorage.getItem('CapChartShow');
    }
  };

  onMounted(() => {
    init();
  });
</script>
